<template>
 	<view class="zh-distribution">
 		<map class="map" :latitude="latitude" :longitude="longitude" :scale="9.5" :markers="mapData.markers" @markertap="pointOne" @callouttap="pointOne"></map>
		<view class="box">
			<view class="top display-flex justify-between">
				<view class="title">
					<text class="font-28">{{ pointData.title }}</text>
				</view>
				<view class="des display-flex align-center" @click="lookIntro" 
					v-if="pointData.id === 10000
					|| pointData.id === 10001
					|| pointData.id === 10002
					|| pointData.id === 10003
					|| pointData.id === 10004
					|| pointData.id === 10005
					|| pointData.id === 10006
					|| pointData.id === 10007
					"
				>
					<text>查看介绍</text>
					<image src="@/static/icons/right_arrow.png" class="right-arrow"/>
				</view>
			</view>
			<view class="bottom display-flex justify-between align-center">
				<view class="left display-flex align-center flex">
					<image src="@/static/icons/address_blue.png" class="address-blue"/>
					<text class="flex font-28">{{ pointData.address }}</text>
				</view>
				<view class="nav-btn" @click="nav">导航</view>
			</view>
		</view>
 	</view>
 </template>
 
 <script setup lang="ts">
 	import { reactive, ref } from 'vue'
 	import { util, system } from '@/utils'
 	import iconPath from '@/static/icons/address_icon.png'
 	import pointPath from '@/static/icons/point_icon.png'
 	//import pointedPath from '@/static/icons/pointed_icon.png'
 	const latitude = ref(23.047263)
 	const longitude = ref(113.065254)
 	const iconData = reactive({
 		width: 20,
 		height:20,
 		iconPath:pointPath,
 	})
 	
 	const iconPointedData = reactive({
 		width: 32,
 		height:39,
 		iconPath:pointPath,
 	})
 	
 	
 	const callout = reactive({
 		color:'#2D2D32',
 		fontSize:14,
 		borderRadius:7,
 		bgColor:"#fff",
 		padding:7,
 		textAlign:'center',
 		display:'ALWAYS'
 	})
 	
 	const pointData:any = ref({
 		id:10000,
 		title:'中恒塱宝仓',
 		address:'广东省佛山市禅城区下塱佛西针织工业园东区一路中恒纺织交易市场',
 		longitude:113.065254,
 		latitude:23.047263,
 		callout:{
 			content:'中恒塱宝仓',
 			...callout,
 		},
 		...iconPointedData
 	})
 	
 	const mapData:any = reactive({
 		markers:[{
 			id:10000,
 			longitude:113.065254,
 			latitude:23.047263,
 			title:'中恒塱宝仓',
 			address:'广东省佛山市禅城区下塱佛西针织工业园东区一路中恒纺织交易市场',
 			callout:{
 				content:'中恒塱宝仓',
 				...callout,
 			},
 			...iconPointedData
 		},{
 			id:10001,
 			longitude:112.911334,
 			latitude:22.973777,
 			title:'西樵亿邦仓',
 			address:'广东省佛山市南海区西樵镇建新路与兴业路交叉路口往东北约160米',
 			callout:{
 				content:'西樵亿邦仓',
 				...callout,
 			},
 			...iconData
 			
 		},{
 			id:10002,
 			longitude:112.814370,
 			latitude:23.104145,
 			title:'三水传化仓',
 			address:'广东省佛山市三水区X529(港口大道)',
 			callout:{
 				content:'三水传化仓',
 				...callout,
 			},
 			...iconData
 		},{
 			id:10003,
 			longitude:113.062744,
 			latitude:22.446154,
 			title:'新会福盛仓',
 			address:'广东省江门市新会区福盛路7号大诚物流园',
 			callout:{
 				content:'新会福盛仓',
 				...callout,
 			},
 			...iconData
 		},{
 			id:10004,
 			longitude:113.098053,
 			latitude:23.603355,
 			title:'清远龙塘仓',
 			address:'广东省清远市清城区龙塘镇忠华棉纱交易市场',
 			callout:{
 				content:'清远龙塘仓',
 				...callout,
 			},
 			...iconData
 		},{
 			id:10005,
 			longitude:112.803112,
 			latitude:23.233689,
 			title:'肇庆四会仓',
 			address:'广东省肇庆市四会市G321(广成线)宇培肇庆物流园W2号仓',
 			callout:{
 				content:'肇庆四会仓',
 				...callout,
 			},
 			...iconData
 		},{
 			id:10006,
 			longitude:113.074126,
 			latitude:22.966721,
 			title:'顺德乐从仓',
 			address:'广东省佛山市顺德区上华工业大道上华智能智造产业园A4栋',
 			callout:{
 				content:'顺德乐从仓',
 				...callout,
 			},
 			...iconData
 		},{
 			id:10007,
 			longitude:112.999044,
 			latitude:23.001928,
 			title:'禅城南庄仓',
 			address:'广东省佛山市禅城区季华西路28号',
 			callout:{
 				content:'禅城南庄仓',
 				...callout,
 			},
 			...iconData
 		},{
 			id:10008,
 			longitude:112.909991,
 			latitude:22.980803,
 			title:'西樵伟科仓',
 			address:'广东省佛山市南海区西樵镇西樵纺织产业基地伟科路1号之一',
 			callout:{
 				content:'西樵伟科仓',
 				...callout,
 			},
 			...iconData
 		},{
 			id:10009,
 			longitude:120.207975,
 			latitude:36.007782,
 			title:'青岛保税港仓',
 			address:'山东省青岛市保税港区前湾路68号',
 			callout:{
 				content:'青岛保税港仓',
 				...callout,
 			},
 			...iconData
 		},{
 			id:10010,
 			longitude:120.126259,
 			latitude:36.017501,
 			title:'青岛黄岛仓',
 			address:'山东省青岛市黄岛区黄河西路29号源铭汇通工贸有限公司',
 			callout:{
 				content:'青岛黄岛仓',
 				...callout,
 			},
 			...iconData
 		},{
 			id:10011,
 			longitude:113.092283,
 			latitude:22.997774,
 			title:'禅城新岗仓',
 			address:'广东省佛山市禅城区新岗路39号',
 			callout:{
 				content:'禅城新岗仓',
 				...callout,
 			},
 			...iconData
 		},{
 			id:10012,
 			longitude:113.029785,
 			latitude:22.984881,
 			title:'禅城罗格仓',
 			address:'广东省佛山市禅城区滘边街南100米全储物流西南1门',
 			callout:{
 				content:'禅城罗格仓',
 				...callout,
 			},
 			...iconData
 		},{
 			id:10013,
 			longitude:120.487581,
 			latitude:30.173692,
 			title:'中恒瓜沥仓',
 			address:'浙江省杭州市萧山区瓜沥镇友谊路1802号',
 			callout:{
 				content:'中恒瓜沥仓',
 				...callout,
 			},
 			...iconData
 		}],
 		
 	})
 
 	
 	const pointOne = (e:any) => {
		console.log(e)
		console.log(mapData)
 		const id = e.detail.markerId
 		const markers = mapData.markers
 		for(let i in markers) {
 			if(markers[i].id === id) {
 				markers[i] = {
 					...markers[i],
 					...iconPointedData,
 				}
 				pointData.value = {
 					...markers[i],
 					...iconPointedData,
 				}
 			} else {
 				markers[i] = {
 					...markers[i],
 					...iconData,
 				}
 			}
 		}
		console.log(pointData.value)
 	}
 	
 	const lookIntro = () => {
 		const markers = [{
 			id:10000,
 			longitude:pointData.value.longitude,
 			latitude:pointData.value.latitude,
 			title:pointData.value.title,
 			address:pointData.value.address,
 			iconPath:iconPath,
 			width:32,
 			height:39
 		}]
 		
 		const params = util.setObjParams(markers)
 		navigateTo('/pages/service/stock?info=' + params)
 	}
 	
 	const nav = () => {
 		system.openLocation({
 			latitude: pointData.value.latitude,
 			longitude: pointData.value.longitude,
 			name:pointData.value.title,
 			address:pointData.value.address,
 			success:() => {
 				
 			}
 		})
 		// const markers = [{
 		// 	id:10000,
 		// 	longitude:pointData.value.longitude,
 		// 	latitude:pointData.value.latitude,
 		// 	iconPath:iconPath,
 		// 	width:'32rpx',
 		// 	height:'39rpx',
 		// }]
 		
 		// const params = util.setObjParams(markers)
 		// navigateTo('/pages/userCenter/map?info=' + params)
 	}
 	
 	const navigateTo = (url:string) => {
 		uni.navigateTo({
 			url:url
 		})
 	}
 	
 </script>
 <style>
 	page {
 		width:100%;
 		height:100%;
 	}
 </style>
 <style lang="scss" scoped>
 	.zh-distribution {
 		width:100%;
 		height:100%;
 		position:relative;
 		.map {
 			width:750rpx;
 			height:100%;
 		}
 		.box {
 			width:686rpx;
 			//height:225rpx;
 			background-color: $uni-bg-card-color;
 			position:fixed;
 			bottom: 68rpx;
 			left:32rpx;
 			right:32rpx;
 			border-radius: 16rpx;
 			box-shadow: 0px 13px 17px 1px rgba(23,23,23,0.08);
 			.top {
 				padding:35rpx 26rpx 0;
 				.title { 
 					font-size:32rpx;
 					color:#333;
 				}
 				.des {
 					font-size: 24rpx;
 					color:#A2A2A2;
 					.right-arrow {
 						width:12rpx;
 						height:22rpx;
 						margin-left:8rpx;
 					}
 				}
 			}
 			.bottom {
 				margin:22rpx 24rpx;
 				padding:24rpx 17rpx;
 				background-color: #F1F5FE;
 				.left {
 					.address-blue {
 						width:44rpx;
 						height:44rpx;
 					}
 					text {
 						font-size: 28rpx;
 						margin-left:7rpx;
 						color:#666;
 					}
 				}
 				.nav-btn {
 					width: 103rpx;
 					height: 66rpx;
 					line-height: 66rpx;
 					background: rgba(255,255,255,0);
 					border: 1rpx solid #1769FF;
 					border-radius: 8rpx;
 					text-align:center;
 					color:#1769FF;
 					font-size:28rpx;
 					font-weight:bold;
 					margin-left:15rpx;
 				}
 			}
 		}
 	}
 </style>